<template>
  <div>
    <Title
      minTitle="计费"
      title="充值记录"
      introduce="展示当前账户的消息额度的所有充值记录。"
    />
    <div class="msg-block">
      <div class="top">
        <span>月份选择：</span>
        <el-date-picker v-model="query" type="date" placeholder="选择月">
        </el-date-picker>
      </div>
      <el-table
        :data="feeList"
        border
        style="width: 100%"
        class="teble"
        :model="query"
      >
        <el-table-column type="index" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="id" label="重置id"></el-table-column>
        <el-table-column prop="cTime" label="日期">
          <template slot-scope="scope">
            {{ scope.row.cTime | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="充值金额"></el-table-column>
        <el-table-column prop="desc" label="设备"></el-table-column>
      </el-table>
      <div class="pagination-block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/Title.vue";
import { $feeRecord } from "@/api/index.js";

export default {
  name: "chongzhi",
  data() {
    return {
      feeList: [],
      query: {
        currPage: 1,
        pageSize: 5,
      },
      total: 0,
      date: [], // 插件选择的时间
    };
  },
  components: {
    Title,
  },
  filters: {
    formatDate(date) {
      const d = new Date(date);
      const month = d.getMonth() + 1; //月份
      const day = d.getDate(); //日
      const hour = d.getHours(); //小时
      const minutes = d.getMinutes(); //分
      const seconds = d.getSeconds(); //秒
      return `${d.getFullYear()}-${month}-${day} ${hour}:${minutes}:${seconds}`;
    },
  },
  watch: {
    date(val) {
      if (val) {
        const d1 = val[0];
        const d2 = val[1];
        const time1 = d1 && d1.getTime();
        const time2 = d2 && d2.getTime();
        if (time1 && time2) {
          this.query.date = time1 + "-" + time2;
        } else {
          this.query.date = "";
        }
      } else {
        this.query.date = "";
      }
    },
  },
  created() {
    this.getFee();
  },
  methods: {
    getFee() {
      $feeRecord(this.query).then((res) => {
        console.log(res);
        this.feeList = res.data.data;
        this.total = res.data.total;
      });
    },
    handleSizeChange(num) {
      this.query.pageSize = num;
      this.query.currPage = 1;
      this.getFee();
    },
    handleCurrentChange(num) {
      this.query.currPage = num;
      this.getFee();
    },
  },
};
</script>

<style lang="scss" scoped>
.msg-block {
  width: 100%;
  background: #fff;
  .top {
    padding: 20px 40px;
    span {
      font-size: 14px;
      font-weight: bold;
    }
  }
  /deep/ th div,
  /deep/ td div {
    text-align: center;
  }
}

.pagination-block {
  padding: 20px 0;
  background-color: #ffffff;
  text-align: center;
  margin-bottom: 30px;
  .el-pagination {
    display: inline-block;
  }
}
</style>
